<template>
	<view>
		<u-tabbar :value="currentTab" activeColor="#23BF61" inactiveColor="#111734" :border="false">
			<u-tabbar-item v-for="(item,i) in tabList" :key="item.name" :text="item.text" :name="item.name" @click="handTab(item)">
				<image class="bar_img" slot='active-icon' :src="item.selectedIconPath"></image>
				<image class="bar_img" :style="item.bigicon" slot='inactive-icon' :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "TabBar",
		props: {
			currentTab: {
				type: String,
				default: 'home'
			}
		},	
		data() {
			return {
				tabList: [{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/icon-home.png",
						"selectedIconPath": "/static/icon-home-selected.png",
						"text": "首页",
						"name": 'home'
					},
					// {
					// 	"pagePath": "/pages/article/article",
					// 	"iconPath": "/static/icon-find.png",
					// 	"selectedIconPath": "/static/icon-find-selected.png",
					// 	"text": "发现",
					// 	"name": "article",
					// },
					{
						"pagePath": "/pages/scan",
						"iconPath": "/static/icon-scode.png",
						"selectedIconPath": "/static/icon-scode.png",
						"text": "",
						"name": "scan",
						"bigicon": 'width:110rpx;height:110rpx;position: relative;bottom:20rpx;'
					},
					// {
					// 	"pagePath": "/pages/wallet/wallet",
					// 	"iconPath": "/static/icon-wallet.png",
					// 	"selectedIconPath": "/static/icon-wallet-selected.png",
					// 	"text": "钱包",
					// 	"name": "wallet"
					// },
					{
						"pagePath": "/pages/user/user",
						"iconPath": "/static/icon-mine.png",
						"selectedIconPath": "/static/icon-mine-selected.png",
						"text": "个人中心",
						"name": "user"
					}
				]
			}
		},
		methods: {
			handTab(row) {
				if(row.name=='scan'){
					uni.scanCode({
						success(res) {
							console.log(res)
						}
					})
				}else{
					uni.switchTab({
						url: row.pagePath
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bar_img {
		width: 54rpx;
		height: 54rpx;
	}
</style>